<template>
  <el-drawer
    v-model="dialogFormVisible"
    :before-close="handleClose"
    destroy-on-close
    direction="rtl"
    :title="title"
    width="30%"
    @close="close"
  >
    <div class="formbody">
      <el-form ref="formRef" :inline="true" label-width="130px" :model="form" :rules="rules">
        <el-form-item label="所属模块" prop="module">
          <el-select v-model="form.module" clearable placeholder="请选择所属模块">
            <el-option v-for="item in Modules" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-input v-model="form.dictType" />
        </el-form-item>
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="form.dictName" />
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="form.memo" maxlength="50" placeholder="请输入备注" show-word-limit type="textarea" />
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button type="primary" @click="handleUpdate">保 存</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { doAdd, doUpdate, getDetails, getLocalStorage } from "@/api/mains";
import { succMsg, failMsg, confirm } from "@/utils/MessageUtils";

export default defineComponent({
  name: "DictEdit",
  emits: {
    fetchData: null //fetchData事件没有检验
  },
  setup(props, { emit }) {
    const state = reactive({
      formRef: null,
      url: "system/dictType",
      id: "",
      Modules: [],
      // enumDetailList: [], //枚举数据详情
      form: {
        id: "",
        module: "",
        dictType: "",
        dictName: "",
        memo: ""
      },
      title: "",
      dialogFormVisible: false,
      rules: {
        module: [{ required: true, trigger: "blur", message: "请选择所属模块" }],
        dictType: [{ required: true, trigger: "blur", message: "请输入字典类型" }],
        dictName: [{ required: true, trigger: "blur", message: "请输入字典名称" }],
        memo: [
          {
            min: 1,
            max: 200,
            message: "名称长度为1到200",
            trigger: "blur"
          }
        ]
      }
    });

    //枚举数据缓存
    state.Modules = getLocalStorage().Modules;

    //显示编辑
    const showDialog = async row => {
      state.dialogFormVisible = true;
      if (row && row.id) {
        state.title = "枚举主表编辑";
        state.id = row.id;
        const res = await getDetails(state.url, state.id);
        state.form = res.data;
      } else {
        state.title = "枚举主表新增";
      }
    };

    const close = () => {
      state["formRef"].resetFields();
      state.form = {
        id: "",
        module: "",
        dictType: "",
        dictName: "",
        memo: ""
      };
      state.dialogFormVisible = false;
    };

    //控制保存（更新）
    const handleUpdate = async () => {
      state["formRef"].validate(async valid => {
        if (valid) {
          if (state.title == "枚举主表新增") {
            const { code, msg } = await doAdd(state.url, state.form);
            if (code == 200) {
              succMsg(msg);
              close();
              emit("fetchData");
            } else {
              failMsg(msg);
            }
          } else {
            const { code, msg } = await doUpdate(state.url, state.form);
            if (code == 200) {
              succMsg(msg);
              close();
              emit("fetchData");
            } else {
              failMsg(msg);
            }
          }
        }
      });
    };
    const handleClose = done => {
      confirm("确定退出吗？", () => {
        done();
      });
    };

    return {
      ...toRefs(state),
      showDialog,
      close,
      handleUpdate,
      handleClose
    };
  }
});
</script>
<style lang="scss" scoped>
/* 定义添加弹窗输入框的长度 */
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 30%;
  padding: 10px;
  text-align: right;
  background: #ffffff;
  border-top: 1px solid #dcdfe6;
}
.footer button {
  width: 45%;
  line-height: 20px;
}
.formbody {
  position: absolute;
  inset: 65px 0 55px;
  overflow-x: hidden;
  overflow-y: scroll;
  :deep() {
    .el-form-item,
    .el-select {
      width: 100%;
    }
    .el-form-item__content {
      width: 65%;
    }
  }
}
</style>
